1.通过flex方式实现：将父盒子的position属性设置为relative，并且display设置为flex，最后设置水平居中和垂直居中。这样设置后，子盒子不需要设置什么，就会实现居中。哪个盒子需要居中，就将父盒子设置这四个属性即可。这样有利于嵌套使用，这也是我实现居中最常用的方式。

例子：

文件center.html的代码如下

文件center1.css的内容如下

补充：我写样式时，喜欢写less文件的方式，所以，这里补充一下less文件。（利用VsCode会自动将less转换为css）。以下是center1.less的代码。

结果：为了保证功能相同，所有实现方式的结果都是下面这样，后面就不写结果了。

注意：

1.position、display、justify-content和align-items四个属性缺一不可，且值不能改变。

2.需要设置父盒子和子盒子的宽度和高度，不然居中就失去了意义。从body的样式开始写，是为了体现在整个屏幕最中心的功能，body样式的宽度可以不设置（默认是100%），但是高度需要设置为100vh。

2.通过原生方式：手动调节两个盒子之间的距离，实现居中，较为灵活。这种方式对父盒子设置不多，所有的关键设置都在子盒子里面，与上面的方式恰好相反。

例子：

文件center.html的代码如下

文件center2.css代码如下

补充：文件center2.less的代码如下

注意：

1.可以看到center2.less实现方式较多，都可以实现相同功能，对于新手，先熟悉一种就好，不然容易混了。一般使用目前center2.css当前表示方式即可，也就是center2.less没有注释掉的方式。（如果熟悉了一种方式，也可以测试一下其他方式）

2.两个盒子外边距实现方式的注意点

方式1：使用left和top方式时，position属性的值必须为absolute或者relative。

方式2：这种方式纯属为了表明方式1的意义才写的，一般不使用。left和top属性的百分比是对于父盒子而言。

方式3：margin-top和margin-left属性对于所有的position的值都可以使用。（不写position属性，使用默认值static也可以）

方式4：这种方式纯属为了表明方式3的意义，一般不使用。

常用的方式是方式1和方式3，使用方式1需要将position属性设置为absolute或relative。

3.如果只设置上和左的外边距，会发现盒子并非在中央。上和左分别偏移了宽度和长度的一半，所以需要向上移动宽度的一半，向左移动长度的一半。移动的百分比是对于当前盒子而言，正好符合我们的需求。我们一般使用百分比方式移动即可，数值移动是为了区分上面百分比才写的。

3.混合使用方式：就是将上面两种方式混合使用，随自己的心意进行写，一般不会这样使用。写这种方式，真正理解了上面的实现方式，实现居中div真的非常容易。

例子：

文件center.html的代码如下

文件center3.css的代码如下

文件center3.less的代码如下